daub verb to coat or smear a surface with a thick substance; to apply with rough, expressive strokes.
A humanistic component library that honours materiality — warm surfaces, honest shadows, textures that feel real. Two files, zero build step, and your interface has substance.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>
Dial in your look. When it feels right, copy the snippet.
Every component speaks both languages — structured references for AI agents, refined aesthetics for discerning humans.
Point any LLM at daub.dev/llms.txt for full component docs with HTML snippets.
Standard ai-plugin.json manifest for AI agent discovery and integration.
Claude Code skill for instant DAUB development — components, themes, and patterns at your fingertips.
Drop these prompts into Claude, ChatGPT, Cursor, or any AI assistant. Each produces a complete, working HTML page.
Dashboard
Analytics Dashboard
Build an analytics dashboard using DAUB (daub.dev/daub.css + daub.dev/daub.js). Include a sidebar with navigation, three stat cards, a sortable data table, and a bar chart. Use the dark theme. Fetch docs from daub.dev/llms.txt first.
Settings
User Settings Page
Create a user settings page with DAUB components. Profile section with avatar and text fields, notifications section with switches, danger zone with delete button that opens an alert dialog. Use the nord theme. Fetch docs from daub.dev/llms.txt first.
E-Commerce
Product Catalog
Build a responsive product catalog with DAUB. Use db-card--media in a db-grid--3 layout, chip filters with data-db-chip-toggle, pagination at the bottom, and a navbar with search. Theme: catppuccin. Fetch docs from daub.dev/llms.txt first.
Productivity
Task Board
Create a Kanban task board using DAUB. Three columns (To Do, In Progress, Done) with db-card components in a db-grid--3. Each card has title, badge for priority, avatar for assignee. Add command palette (Ctrl+K). Theme: tokyo-night. Fetch docs from daub.dev/llms.txt first.
Content
Blog Reading Page
Build a blog reading page with DAUB. Use db-prose for the article, db-breadcrumbs for navigation, author card with db-avatar, table of contents sidebar using db-nav-menu. Theme: github. Include theme switcher. Fetch docs from daub.dev/llms.txt first.
Onboarding
Multi-Step Form
Create a multi-step onboarding form with DAUB's stepper component. Step 1: account info (fields). Step 2: preferences (checkboxes, switches). Step 3: confirmation (summary card). Use db-stepper for progress, buttons to navigate. Theme: ember-light. Fetch docs from daub.dev/llms.txt first.
Minimal Example
Analytics Dashboard in ~40 Lines
| Customer | Amount | Status |
|---|---|---|
| Alice Park | $120 | Paid |
| Bob Chen | $85 | Pending |
| Carol Davis | $240 | Paid |
Body text — The quick brown fox jumps over the lazy dog. Charter at 16px with 1.6 line height gives comfortable reading.
Caption text — System UI sans-serif for labels and small text.
Passionate about creating interfaces that feel as tangible as the real world. Loves texture and warmth in digital spaces.
Building the bridge between skeuomorphic beauty and modern performance. Ships CSS that sparks joy.
A complete component library with 28 hand-crafted pieces. Warm cream palette, 8px grid, organic feel.
| Name | Category | Score | Status |
|---|---|---|---|
| Button | Controls | 98 | Stable |
| Modal | Feedback | 95 | Stable |
| Stepper | Navigation | 87 | New |
| Toast | Feedback | 92 | Beta |
These are the advanced configuration options that are hidden by default. Use the collapsible component for progressive disclosure.
This action cannot be undone. This will permanently delete the selected item from your account.
This is a sheet panel that slides in from the right. Use it for detail views, settings, or supplementary content.
A mobile-friendly bottom drawer for actions, forms, or navigation.
| Component | Category | Tier | |
|---|---|---|---|
| Accordion | Interactive | Tier 2 | |
| Calendar | Complex | Tier 3 | |
| Carousel | Complex | Tier 3 | |
| Command | Complex | Tier 3 | |
| Separator | CSS-only | Tier 1 |
Good interface design is invisible. It operates in the space between intention and action, guiding without commanding. The best components feel inevitable rather than clever.
Design is not just what it looks like and feels like. Design is how it works.
Inline code looks like var theme = 'light' and links look like this considered anchor.
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.css">
<script src="https://cdn.jsdelivr.net/npm/daub-ui@latest/daub.js"></script>Sticky top app bar with brand, nav links, spacer, and action area. Responsive hamburger on mobile.
Extended grid with tablet breakpoint (2 cols at <1024px, 1 col at <640px).
db-container--wide (1200px) and db-container--narrow (640px).
Edge-to-edge images with db-card--media. No padding fights.
Beautiful morning light.
Deep blue inspiration.
Warm desert tones.
Filter chips with db-chip--active. Wrap in data-db-chip-toggle for click-to-select.
Overlapping stack with overflow counter.
Search box with auto-show clear button when input has text.
Show/hide elements by breakpoint: db-hide-mobile, db-show-mobile, db-hide-tablet, db-show-tablet, db-hide-desktop, db-show-desktop.
76 components that respond to light, texture, and theme. Drop them in, ship something that feels considered — without the ceremony.